<template>
	<div ref="MapView" style="height:100%">
		<div class="control">
			<RadioGroup v-model="SenceMode" type="button">
				<Radio label="2D"></Radio>
				<Radio label="3D"></Radio>
			</RadioGroup>
		</div>
	</div>
</template>

<script>
	// import { RectangularSensorPrimitive } from '../../components/simpleMap/plug-in/RectangularSensor/RectangularSensor.Primitive'
	import simpleMap from '../../components/simpleMap';

	import TetrahedronGeometry from './TetrahedronGeometry'
	import radarGeometry from './radarGeometry'


	var map = null;
	var mapConfig = [{ "type": "TD", "name": "天地图", "layerType": "background", "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", "default": false }]
	const randomNum = (min, max) => parseFloat(Math.random() * (max - min + 1) + min, 10);

	export default {
		data() { return { SenceMode: '3D', } },
		watch: { SenceMode(val) { map.SenceMode = val; } },
		mounted() {
			map = simpleMap.initMap(this.$refs.MapView, {
				mapOptions: {
					animation: false, // 关闭默认动画事件
					senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
				},
			});
			map.addProviders(mapConfig);
			map.flytochina();
			const viewer = map.getViewer();

			const scene = viewer.scene;
			// const ellipsoid = scene.globe.ellipsoid;
			/* 使用 Primitive API 绘制几何 */

			var radarOptions = {
				xStart: 0,
				xEnd: 180,
				yStart: -90,
				yStart: 90,

				xHalfAngle: 45,
				yHalfAngle: 45,
			};
			let l = Cesium.Cartesian3.fromDegrees(117.224, 31.819, 128);
			let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0));


			for (let i = 0; i < 10; i++) {
				var _Entity = viewer.entities.add({
					position: Cesium.Cartesian3.fromDegrees(117.224 + i * 2, 31.819, 128),
					orientation: Cesium.Transforms.headingPitchRollQuaternion(l, r),
					rectangularSensor: new Cesium.RectangularSensorGraphics({
						radius: 100000,
						show: true,
						slice: 8,
						xHalfAngle: Cesium.Math.toRadians(radarOptions.xHalfAngle),
						yHalfAngle: Cesium.Math.toRadians(radarOptions.yHalfAngle),
						lineColor: this.rgba2Color('rgba(100,0,255,1)'),
						material: this.rgba2Color('rgba(100,0,255,0.4)'),
						showScanPlane: true,
						scanPlaneSwitch: true,
						scanPlaneColor: this.rgba2Color('rgba(100,0,255,0.7)'),
						scanPlaneMode: 'vertical',
						showIntersection: false,
						scanPlaneRate: 5,
						showThroughEllipsoid: false
					})
				});
			}


			


		},
		methods: {
			rgba2Color(value) {
				const regex = /(?<=\().+?(?=\))/g;
				var _value = value.match(regex)[0].split(',');
				return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
			},
		}
	}
</script>

<style>
.layout {
	height: 100%;
	width: 100%;
}

.control {
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px 20px;
	color: #fff;
	z-index: 4;
}
</style>